<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>商品详情</title>
  <link rel="stylesheet" href="./js/chengxianchao/swiper-bundle.min.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/goods.css" />
</head>

<body>
  <div class="container">
    <div class="header">
      <div class="lt" onclick="javascript:history.go(-1)">&lt;</div>
      <div class="ct">商品详情</div>
      <div class="rt"></div>
    </div>
    <!-- 轮播图 -->
    <div class="goodsimgs swiper">
      <div class="swiper-wrapper">
        <!-- Slides -->
      </div>
      <div class="swiper-pagination"></div>
      <!-- <img src="./static/demo/idx-banner.jpg" background-size="cover" /> -->
    </div>
    <!-- 小标签 -->
    <div class="service-policy">
      <div class="item">30天无忧退货</div>
      <div class="item">48小时快速退款</div>
      <div class="item">满88元免邮费</div>
    </div>
    <!-- 商品信息 -->
    <div class="goods-info">
      <div class="c">
        <!-- <span class="name">商品名称</span>
          <span class="desc">商品小描述</span>
          <span class="price">￥ 商品价格</span>
          <div class="brand">
            <a href="./brandDetail.html">
              <span>品牌名称</span>
            </a>
          </div> -->
      </div>
    </div>
    <div class="section-nav section-attr">
      <div class="t">请选择规格数量</div>
      <img class="i" src="./static/images/address_right.png" background-size="cover" />
    </div>
    <!---评论信息-->
    <div class="comments">
      <div class="h">
        <a href="./comment.html">
          <span class="t">评价(11)</span>
          <span class="i">查看全部</span>
        </a>
      </div>
      <div class="b">
        <div class="item">
          <div class="info">
            <div class="user">
              <img src="./static/demo/idx-brand.jpg" />
              <span>昵称</span>
            </div>
            <div class="time">2021-11-22</div>
          </div>
          <div class="content">
            这是评论正文内容这是评论正文内容这是评论正文内容
          </div>
          <div class="imgs">
            <img class="img" src="./static/demo/idx-brand.jpg" />
            <img class="img" src="./static/demo/idx-brand.jpg" />
            <img class="img" src="./static/demo/idx-brand.jpg" />
          </div>
          <!-- <div class="spec">白色 2件</div> -->
        </div>
        <div class="item">
          <div class="info">
            <div class="user">
              <img src="./static/demo/idx-brand.jpg" />
              <span>昵称</span>
            </div>
            <div class="time">2021-11-22</div>
          </div>
          <div class="content">
            这是评论正文内容这是评论正文内容这是评论正文内容
          </div>
          <div class="imgs">
            <img class="img" src="./static/demo/idx-brand.jpg" />
            <img class="img" src="./static/demo/idx-brand.jpg" />
            <img class="img" src="./static/demo/idx-brand.jpg" />
          </div>
          <!-- <div class="spec">白色 2件</div> -->
        </div>
      </div>
    </div>
    <div class="goods-attr">
      <div class="t">商品参数</div>
      <div class="l">
        <!-- <div class="item">
            <span class="left">规格：</span>
            <span class="right">xxxx</span>
          </div>
          <div class="item">
            <span class="left">规格：</span>
            <span class="right">xxxx</span>
          </div>
          <div class="item">
            <span class="left">规格：</span>
            <span class="right">xxxx</span>
          </div> -->
      </div>
    </div>
    <!-- 商品详情 -->
    <div class="detail">
      <!-- 商品详情商品详情商品详情商品详情商品详情商品详情商品详情商品详情商品详情商品详情商品详情 -->
    </div>

    <!-- 常见问题 -->
    <div class="common-problem">
      <div class="h">
        <div class="line"></div>
        <span class="title">常见问题</span>
      </div>
      <div class="b">
        <!-- <div class="item">
            <div class="question-box">
              <span class="spot"></span>
              <span class="question">问题名称</span>
            </div>
            <div class="answer">问题回答</div>
          </div>
          <div class="item">
            <div class="question-box">
              <span class="spot"></span>
              <span class="question">问题名称</span>
            </div>
            <div class="answer">问题回答</div>
          </div>
          <div class="item">
            <div class="question-box">
              <span class="spot"></span>
              <span class="question">问题名称</span>
            </div>
            <div class="answer">问题回答</div>
          </div> -->
      </div>
    </div>
    <!-- 大家都在看，关联商品 -->
    <div class="related-goods">
      <div class="h">
        <div class="line"></div>
        <span class="title">大家都在看</span>
      </div>
      <div class="b">
        <!-- <div class="item">
            <a href="/pages/goods/goods">
              <img
                class="img"
                src="./static/demo/idx-brand.jpg"
                background-size="cover"
              />
              <span class="name">名称</span>
              <span class="price">￥111</span>
            </a>
          </div>
          <div class="item">
            <a href="/pages/goods/goods">
              <img
                class="img"
                src="./static/demo/idx-brand.jpg"
                background-size="cover"
              />
              <span class="name">名称</span>
              <span class="price">￥111</span>
            </a>
          </div>
          <div class="item">
            <a href="/pages/goods/goods">
              <img
                class="img"
                src="./static/demo/idx-brand.jpg"
                background-size="cover"
              />
              <span class="name">名称</span>
              <span class="price">￥111</span>
            </a>
          </div> -->
      </div>
    </div>
  </div>
  <!-- 商品属性参数弹框 -->
  <div class="attr-pop-box" hidden>
    <div class="attr-pop">
      <div class="close">
        <img class="icon" src="./static/images/icon_close.png" />
      </div>
      <div class="img-info">
        <img class="img" src="./static/demo/idx-brand.jpg" />
        <div class="info">
          <div class="c">
            <div class="p">价格：<em style="color: red">￥111</em>></div>
            <!-- <div class="a">已选择：红色，大</div> -->
          </div>
        </div>
      </div>
      <div class="spec-con">
        <!-- <div class="spec-item">
            <div class="name">颜色</div>
            <div class="values">
              <div class="value selected">粉红色</div>
              <div class="value">白色</div>
              <div class="value">黑色</div>
            </div>
          </div>
          <div class="spec-item">
            <div class="name">尺寸</div>
            <div class="values">
              <div class="value selected">大</div>
              <div class="value">中</div>
              <div class="value">小</div>
            </div>
          </div> -->

        <div class="number-item">
          <div class="name">数量</div>
          <div class="selnum">
            <div class="cut">-</div>
            <input value="1" class="number" type="number" />
            <div class="add">+</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部按钮区域 -->
  <div class="bottom-btn">
    <div class="l l-collect">
      <img class="icon" src="./static/images/icon_collect.png" />
      <!-- <img class="icon" src="./static/images/icon_collect_checked.png"/> -->
    </div>
    <div class="l l-cart">
      <div class="box">
        <span class="cart-count"></span>
        <img class="icon" src="./static/images/ic_menu_shoping_nor.png" />
      </div>
    </div>
    <div class="c">立即购买</div>
    <div class="r">加入购物车</div>
  </div>
  <script type="text/html" id="tpl-gallery">
      {{each gallery}}
      <div class="swiper-slide">
        <img src="{{$value.img_url}}" background-size="cover" />
      </div>
      {{/each}}
    </script>

  <!-- 商品信息模板 -->
  <script type="text/html" id="tpl-goodsinfo">
      <span class="name">{{info.name}}</span>
      <span class="desc">{{info.goods_brief}}</span>
      <span class="price">￥ {{info.retail_price}}</span>
      <!-- <div class="brand">
        <a href="./brandDetail.html">
          <span>{{brand.name}}</span>
        </a>
      </div> -->
    </script>

  <!-- 评论列表模板 -->
  <script type="text/html" id="tpl-commentslist">
      <div class="h">
        <a href="./comment.html">
          <span class="t">评价({{count}})</span>
          <span class="i">查看全部</span>
        </a>
      </div>
      {{if count!=0}}
      <div class="b">
        <div class="item">
          <div class="info">
            <div class="user">
              <img src="{{ data.avatar }}" />
              <span>{{data.nickname}}</span>
            </div>
            <div class="time">{{data.add_time}}</div>
          </div>
          <div class="content">{{data.content}}</div>
          <div class="imgs">
            {{each data.pic_list}}
            <img class="img" src="{{$value.pic_url}}" />
            {{/each}}
          </div>
          <!-- <div class="spec">白色 2件</div> -->
        </div>
      </div>
      {{/if}}
    </script>

  <!-- 商品参数模板 -->
  <script type="text/html" id="tpl-attribute">
      {{each attribute}}
      <div class="item">
        <span class="left">{{$value.name}}</span>
        <span class="right">{{$value.value}}</span>
      </div>
      {{/each}}
    </script>

  <!-- 问题模板 -->
  <script type="text/html" id="tpl-issue">
      {{each issue}}
      <div class="item">
        <div class="question-box" style="overflow: hidden;">
          <span class="spot"></span>
          <span class="question">{{$value.question}}</span>
        </div>
        <div class="answer">{{$value.answer}}</div>
      </div>
      {{/each}}
    </script>

  <!-- 大家都在看模板 -->
  <script type="text/html" id="tpl-related">
      {{each goodsList}}
      <div class="item">
        <a href="./goods.html?goodsid={{$value.id}}">
          <img
            class="img"
            src="{{$value.list_pic_url}}"
            background-size="cover"
          />
          <span class="name">{{$value.name}}</span>
          <span class="price">￥{{$value.retail_price}}</span>
        </a>
      </div>
      {{/each}}
    </script>

  <!-- 添加购物车弹框模板 -->
  <script type="text/html" id="tpl-choose">
      {{each specificationList}}
      <div class="spec-item">
        <div class="name">{{$value.name}}</div>
        <div class="values">
          {{each $value.valueList}}
          <div
            class="value {{$index==0 ? 'selected' : ''}}"
            data-specid="{{$value.id}}"
          >
            {{$value.value}}
          </div>
          {{/each}}
        </div>
      </div>
      {{/each}}
    </script>

  <script src="./js/jquery.js"></script>
  <script src="./js/template-web.js"></script>
  <script src="./js/chengxianchao/axios.min.js"></script>
  <script src="./js/chengxianchao/swiper-bundle.min.js"></script>
  <script src="./js/chengxianchao/baseApi.js"></script>
  <script src="./js/chengxianchao/goods.js"></script>
</body>

<script>
  // 加入购物车逻辑：
  //  首先弹出参数选项遮罩层，进行选择
  //  只有选择好了对应的参数内容，再点击加入购物车才可以实现加入功能。
  //  总结： 第一次点击加入购物车其本质是打开遮罩层，第二次才是加入逻辑
  // TODO：按照真实业务逻辑，重新书写。这里仅做效果展示

  let btn = document.querySelector(".bottom-btn .r");
  let box = document.querySelector(".attr-pop-box");
  let close = document.querySelector(".attr-pop-box .close");
  let row = document.querySelector(".section-nav.section-attr");
  btn.onclick = function () {
    if (box.getAttribute("hidden") === null) {
      let spec_ids = [];
      $(".selected").each((index, ele) => {
        spec_ids.push($(ele).data("specid"));
      });
      axios
        .get("/api/goods/detail", {
          params: {
            id: new URLSearchParams(document.location.search).get("goodsid"),
          },
          headers: {
            "X-Nideshop-Token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo2NSwiaWF0IjoxNjQxNDQxMjIwfQ.Z5VXSIIpsb-3AmuKb9wsa1fVtuxFQQSltzsJ8EeqkkA",
          },
        })
        .then((resp) => {
          let prod_id = "";
          resp.data.data.productList.some((value) => {
            if (value.goods_specification_ids === spec_ids.join("_")) {
              prod_id = value.id;
              return true;
            }
          });
          return prod_id;
        })
        .then((prod_id) => {
          axios({
            url: "/api/cart/add",
            method: "POST",
            headers: {
              "X-Nideshop-Token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo2NSwiaWF0IjoxNjQxNDQxMjIwfQ.Z5VXSIIpsb-3AmuKb9wsa1fVtuxFQQSltzsJ8EeqkkA",
              "Content-Type": "application/json",
            },
            data: {
              goodsId: parseInt(
                new URLSearchParams(document.location.search).get("goodsid")
              ),
              number: parseInt($(".selnum .number").val()),
              productId: parseInt(prod_id),
            },
          }).then((resp) => {
            // 更新购物车总数
            console.log(prod_id);
            axios
              .get("/api/cart/goodscount", {
                headers: {
                  "X-Nideshop-Token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo2NSwiaWF0IjoxNjQxNDQxMjIwfQ.Z5VXSIIpsb-3AmuKb9wsa1fVtuxFQQSltzsJ8EeqkkA",
                },
              })
              .then((resp) => {
                console.log(resp.data.data.cartTotal.goodsCount);
                $(".cart-count").html(resp.data.data.cartTotal.goodsCount);
              });

            close.click();
          });
        });
    } else {
      box.removeAttribute("hidden");
    }
  };
  row.onclick = function () {
    box.removeAttribute("hidden");
  };
  close.onclick = function () {
    box.setAttribute("hidden", true);
  };

  // 减少购物车数量
  $(".selnum .add").on("click", function () {
    const count = parseInt($(this).siblings(".number").val()) + 1;
    console.log(count);
    $(this).siblings(".number").val(count);
  });
  // 添加购物车数量
  $(".selnum .cut").on("click", function () {
    if ($(this).siblings(".number").val() <= 1) {
      console.log("denied");
      return;
    }
    const count = parseInt($(this).siblings(".number").val()) - 1;
    $(this).siblings(".number").val(count);
  });
</script>

</html>